<script setup lang="ts">
import { toRefs, ref } from 'vue'
import { robotTypes } from '../../utils/index'
import { robotFaultInfo } from '@/api/inspection/robot-list'

interface RobotItem {
  id: number
  code: string
  status: string
  type?: string
}

interface RobotStatusOption {
  prop: string
  name: string
}

interface RobotStatusData {
  navStatus?: number
  wheelStatus?: number
  controlBoxCode?: boolean
  flameSensorCode?: boolean
  hitSensorCode?: boolean
  humidCode?: boolean
  noiseCode?: boolean
  pm10Code?: boolean
  pm25Code?: boolean
  radarCode?: boolean
  tempCode?: boolean
  mileage?: boolean
  [key: string]: any
}

const props = defineProps<{
  list: RobotItem[]
  activeRobot: number
  activeName: string
}>()

const { activeRobot } = toRefs(props)

function isOffline(status: string): boolean {
  return status === '离线'
}

function isActiveRobot(id: number): boolean {
  return id === activeRobot.value
}

const emit = defineEmits(['open', 'enter', 'select', 'update:activeName'])
function openStartPointPositionDialog(code: string): void {
  emit('open', code)
}

function enterControl(code: string, type?: string): void {
  emit('enter', code, type)
}

function selectActiveRobot(id: number, code: string): void {
  emit('select', id, code)
}

function handleTabChange(tabName: string): void {
  emit('update:activeName', tabName)
}

const robotStatusOptions: RobotStatusOption[] = [
  { prop: 'navStatus', name: '导航状态' },
  { prop: 'wheelStatus', name: '运动系统状态' },
  { prop: 'controlBoxCode', name: '火焰传感器问题' },
  { prop: 'flameSensorCode', name: '热感相机问题' },
  { prop: 'hitSensorCode', name: '碰撞传感器问题' },
  { prop: 'humidCode', name: '湿度传感器问题' },
  { prop: 'noiseCode', name: '噪声传感器问题' },
  { prop: 'pm10Code', name: 'PM10问题' },
  { prop: 'pm25Code', name: 'PM2.5问题' },
  { prop: 'radarCode', name: '雷达问题' },
  { prop: 'tempCode', name: '温度传感器问题' },
  { prop: 'mileage', name: '里程计问题' }
]

const robotStatusVisible = ref<boolean>(false)
const robotStatusData = ref<RobotStatusData>({})

async function showRobotStatus(code: string): Promise<void> {
  robotStatusVisible.value = true
  const { data = {} } = await robotFaultInfo(code)
  robotStatusData.value = data
}

function formatStatusData(prop: string, val: any): string {
  switch (prop) {
    case 'navStatus':
      if (val === 0 || val === 1) return '导航故障'
      if (val === 2) return '导航待机'
      if (val === 3) return '导航中'
      if (val === 4) return '遥控模式'
      break
    case 'wheelStatus':
      if (val === 1) return '正常'
      return '异常'
    default:
      return val ? '异常' : '正常'
  }
  return ''
}
</script>

<template>
  <div class="h-full bg-[#162331] px-5">
    <el-dialog v-model="robotStatusVisible" title="机器人状态">
      <el-descriptions border :column="2">
        <el-descriptions-item
          v-for="item in robotStatusOptions"
          :key="item.prop"
          :label="item.name"
          align="center"
        >
          {{ formatStatusData(item.prop, robotStatusData[item.prop]) }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-tabs :model-value="activeName" @tab-change="handleTabChange">
      <!-- 室外 -->
      <el-tab-pane class="!text-white" label="室外" :name="robotTypes.OUTSIDE">
        <template v-for="item in list" :key="item.id">
          <el-popover placement="right" trigger="contextmenu">
            <div class="flex flex-col gap-2">
              <el-button @click="openStartPointPositionDialog(item.code)"> 位置校准 </el-button>
              <el-button @click="showRobotStatus(item.code)"> 机器人状态 </el-button>
              <el-button @click="enterControl(item.code)">进入操控端</el-button>
            </div>
            <template #reference>
              <div
                class="text-white cursor-pointer select-none p-3 bg-[#37424e] rounded text-sm font-bold flex justify-between mb-4"
                :class="{
                  '!bg-[#007EBF]': isActiveRobot(item.id)
                }"
                data-test="inspection-robot-item"
                @click="selectActiveRobot(item.id, item.code)"
              >
                <div>{{ item.code }}</div>
                <div class="flex items-center">
                  <span
                    class="inline-block w-2 h-2 rounded-full mr-2"
                    :class="[isOffline(item.status) ? 'bg-[#5E6867]' : 'bg-[#20FEA5]']"
                  ></span>
                  <span>{{ item.status }}</span>
                </div>
              </div>
            </template>
          </el-popover>
        </template>
      </el-tab-pane>
      <!-- 室内 -->
      <el-tab-pane class="!text-white" label="室内" :name="robotTypes.INSIDE">
        <template v-for="item in list" :key="item.id">
          <el-popover placement="right" trigger="contextmenu">
            <template #default>
              <el-button class="w-full mb-2" @click="openStartPointPositionDialog(item.code)"
                >位置校准</el-button
              >
              <el-button class="w-full !ml-0" @click="enterControl(item.code, item.type)"
                >进入操控端</el-button
              >
            </template>
            <template #reference>
              <div
                class="text-white cursor-pointer select-none p-3 bg-[#37424e] rounded text-sm font-bold flex justify-between mb-4"
                :class="{
                  '!text-[#5E6867]': isOffline(item.status)
                }"
                @click="selectActiveRobot(item.id, item.code)"
              >
                <div>{{ item.code }}</div>
                <div class="flex items-center">
                  <span
                    class="inline-block w-2 h-2 rounded-full mr-1 bg-[#20FEA5]"
                    :class="{
                      '!bg-[#5E6867]': isOffline(item.status)
                    }"
                  ></span>
                  <span>{{ item.status }}</span>
                </div>
              </div>
            </template>
          </el-popover>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-tabs__nav-wrap) {
  &::after {
    height: 0;
  }
}
:deep(.el-tabs__item) {
  color: #fff;
  font-weight: bold;
}
:deep(.el-tabs__active-bar) {
  background-color: #007ebf;
}

.el-button + .el-button {
  margin-left: 0 !important;
}
</style>
